import 'package:flutter/material.dart';

void main() {
  runApp(MaterialApp(
      home: Scaffold(
          appBar: AppBar(
            title: Text("我的第一个Flutter组件"),
          ),
          body: GridBuilderCase() // 列表,
          )));
}

class GridBuilderCase extends StatelessWidget {
  const GridBuilderCase({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return GridView.builder(
      gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
        crossAxisCount: 2, // 每行显示的个数
      ),
      itemBuilder: (BuildContext context, int index) {
        return Container(
          width: 200,
          margin: const EdgeInsets.all(10),
          decoration: BoxDecoration(
              color: Colors.blue, borderRadius: BorderRadius.circular(10)),
          height: 100,
          alignment: Alignment.center,
          child: Text('第$index'),
        );
      },
      itemCount: 10,
    );
  }
}

class GridCase extends StatelessWidget {
  const GridCase({Key? key}) : super(key: key);

  List<Widget> getList() {
    return [1, 2, 3, 4, 5, 6, 7, 8, 9, 10].map((item) {
      return Container(
        width: 200,
        margin: const EdgeInsets.all(10),
        decoration: BoxDecoration(
            color: Colors.blue, borderRadius: BorderRadius.circular(10)),
        height: 100,
        alignment: Alignment.center,
        child: Text('第$item个'),
      );
    }).toList();
  }

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return GridView(
        gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
          crossAxisCount: 2, // 每行显示的个数
        ),
        children: getList());
  }
}

class ListViewBuilderCase extends StatelessWidget {
  const ListViewBuilderCase({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return ListView.builder(
        // 里面包含itemBuilder,itemCount属性器
        itemBuilder: (BuildContext context, int index) {
          return Container(
            width: 200,
            margin: const EdgeInsets.all(10),
            decoration: BoxDecoration(
                color: Colors.blue, borderRadius: BorderRadius.circular(10)),
            height: 100,
            alignment: Alignment.center,
            child: Text(
              "第${index + 1}个",
              style: const TextStyle(color: Colors.white, fontSize: 30),
            ),
          );
        },
        itemCount: 10);
  }
}

class ListViewCase extends StatelessWidget {
  const ListViewCase({Key? key}) : super(key: key);

  // 获取整个的列表
  List<Widget> getList() {
    List<Widget> list = [];
    for (var i = 0; i < 10; i++) {
      list.add(Container(
        width: double.infinity,
        margin: EdgeInsets.all(10),
        decoration: BoxDecoration(
            color: Colors.blue, borderRadius: BorderRadius.circular(10)),
        height: 100,
        alignment: Alignment.center,
        child: Text(
          "第${i + 1}个",
          style: TextStyle(color: Colors.white, fontSize: 30),
        ),
      ));
    }
    return list;
  }

  @override
  Widget build(BuildContext context) {
    return ListView(
      children: getList(),
    );
  }
}
